<template>
    <div class="home">
        <el-row :gutter="20">
            <el-col :span="11" class="col-item">
                <h2>模拟工作平台</h2>
                <p>
                    之前一直想做一个工作平台，有想弥补以前毕业设计没做好的遗憾，另外也是想对现在自己这两年所学做个总结。刚好最近项目用到了开源框架若依管理系统，感觉这个系统挺不错的，所以就用对应技术模仿了一个。
                </p>
                <p>
                    这个框架可以用于大多数的Web管理系统，当然，相比于若依来说这个要简单很多，但简易版的功能也足以满足了，如权限管理、代码生成、流程控制等，前后端都有，同时支持移动客户端访问。系统会陆续更新一些实用功能。
                </p>
                <p>
                    <b>当前版本:</b> <span>V1.0.0 </span>
                </p>
                <p>
                    <el-button-group>
                        <el-button type="primary" round size="mini" icon="fa fa-cloud" @click="toVue()"> 前/后端
                        </el-button>
                        <el-button type="primary" round size="mini" icon="fa fa-cloud" @click="toSpringBoot()">
                            后端
                        </el-button>
                        <el-button type="primary" round size="mini" icon="fa fa-home" @click="toHome()"> 主页
                        </el-button>
                    </el-button-group>
                </p>
            </el-col>
            <el-col :span="11">
                <el-row>
                    <el-col :span="24">
                        <h2>技术选型</h2>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <h4>
                            后端技术
                        </h4>
                        <ul>
                            <li v-for="back in backtechnologys">{{back}}</li>
                            <li>...</li>
                        </ul>
                    </el-col>
                    <el-col :span="8">
                        <h4>前端技术</h4>
                        <ul>
                            <li v-for="front in fronttechnologys">{{front}}</li>
                            <li>...</li>
                        </ul>
                    </el-col>
                    <el-col :span="8">
                        <h4>中间组件</h4>
                        <ul >
                            <li v-for="intermed in intermediateComponent">{{intermed}}</li>
                            <li>...</li>
                        </ul>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-divider/>
        <el-row :gutter="20">
            <el-col :span="10" >
                <el-card class="select-chart">
                    <div class="body">
                        <Touch/>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="update-log">
                    <div slot="header" class="clearfix">
                        <span>捐赠支持</span>
                    </div>
                    <div class="body">
                        <img src="@/assets/images/alipayPayCode.jpg" alt=""
                             width="100%">
                        <span style="display: inline-block;height: 30px;line-height: 30px">捐赠时添加一个备注，以便展示捐赠者名单。</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="update-log">
                    <div slot="header" class="clearfix">
                        <span>更新日志</span>
                    </div>
                    <el-collapse accordion>
                        <el-collapse-item title="v1.0.0 - 2021.08.23">
                            <ol>
                                <li>模拟工作平台系统正式发布</li>
                            </ol>
                        </el-collapse-item>
                    </el-collapse>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Touch from "./touch";
    export default {
        components:{
            Touch
        },
        name: "workflowindex",
        data() {
            return {
                title: '查看详情',
                //更新日志
                response: '1.0',
                //后端技术选型
                backtechnologys:["Apache Shiro","jwt","MyBatis","Druid","Spring Cloud Netflix","Swagger2" ,
                "ehCache"],
                //前端技术
                fronttechnologys:["vue","element-ui","vuex","axios","vue-router","vue-treeselect"],
                //中间组件
                intermediateComponent:["mysql","redis","rabitmq","jenkins"],
            };
        },
        created() {

        },
        methods: {
            toVue() {
                window.open('https://gitee.com/ldddddd/workflow/tree/devalopshiro/workflow-ui', '_blank');
            },
            toSpringBoot() {
                window.open('https://gitee.com/ldddddd/workflow/tree/devalopshiro/', '_blank');
            },
            toHome() {
                window.open('http://localhost:800/#/index', '_blank');
            }
        }
    }
</script>

<style scoped >
</style>